<script setup>
import {inject, onMounted, ref} from "vue";
import {useMessage} from "jiuqi-ui";
//================================================【公用相关】============================================================
//提示信息组件
const message = useMessage()
//发送请求组件
const context = inject('context')
//提示信息1
const confirmInfo1 = ref('')
//提示信息2
const confirmInfo2 = ref('')
//提示信息3
const confirmInfo3 = ref('')
//需要强制删除时用户手动输入的内容
const userConfirmText = ref('')
//================================================【组件通信】============================================================
//父组件传递的数据
const props = defineProps({
    isFolder:{
        type:Boolean,
        required:true
    }
});
//控制 删除确认对话框  显示与隐藏
const deleteConfirmDialogVisible = inject('deleteConfirmDialogVisible')
//获取 当前处理的  标签分组
let { folderInfo,editFolder, callback } = inject('labelFolder')
//获取 当前处理的  标签
const labelItem = inject('curLabelItem')
//================================================【组件属性】============================================================

//================================================【普通方法】============================================================
//==================================================================【模态框：取消、确认】
function cancel() {
    deleteConfirmDialogVisible.value = false
}
function confirm() {
        if( userConfirmText.value === ''){
            message.error('请输入验证信息')
        }else if(props.isFolder){
            if (userConfirmText.value === `我确认删除${folderInfo.title}`) {
                deleteLabelFolder()
                deleteConfirmDialogVisible.value = false
            }else {
                message.error('验证信息不匹配')
            }
        }else {
            if (userConfirmText.value === `我确认删除${labelItem.title}`) {
                deleteLabel()
                deleteConfirmDialogVisible.value = false
            }else {
                message.error('验证信息不匹配')
            }
        }
}
//=================================================================【执行删除】
//标签分组删除
function deleteLabelFolder(){
    context.getPlugin('http').get(`labelmanager/label/group/delete/${folderInfo.id}`)
        .then(() => {
            editFolder.removeCurrTreeNode()
            folderInfo = null
            message.success('标签分组删除成功')
        })
}
//标签删除
function deleteLabel(){
    context.getPlugin('http').get(`labelmanager/label/delete/${labelItem.id}`).then(() => {
        callback.saveLabelBack()
        message.success('标签删除成功')
    }).catch(() => {
        message.error('标签分组删除失败')
    })
}
//================================================【生命周期】============================================================
onMounted(() => {
    if (props.isFolder) {
        confirmInfo1.value = `警告：删除操作无法撤销！请慎重操作！`
        confirmInfo2.value = `该操作将永久删除${folderInfo.title}。为防止意外，确认继续操作请输入以下内容：`
        confirmInfo3.value = `我确认删除${folderInfo.title}`
    } else {
        confirmInfo1.value = `警告：删除操作无法撤销！请慎重操作！`
        confirmInfo2.value = `该操作将永久删除${labelItem.title}。为防止意外，确认继续操作请输入以下内容：`
        confirmInfo3.value = `我确认删除${labelItem.title}`
    }
})
</script>

<template>
    <j-modal
            v-model="deleteConfirmDialogVisible"
            :title="props.isFolder?'删除标签分组':'删除标签'"
            :fullscreenable='false'
            :mask-closable="false"
            :mask="false"
    >
        <j-modal-content class="modalContent forceDeleteContent">
            <div class="textInfoClass">
                <div>{{ confirmInfo1 }}</div>
                <div>{{ confirmInfo2 }}</div>
                <div>{{ confirmInfo3 }}</div>
            </div>
            <j-input v-model="userConfirmText" v-focus="true" placeholder="请输入提示内容以确认继续操作"></j-input>
        </j-modal-content>
        <template #footer>
            <j-space style="justify-content: flex-end">
                <j-button @click="cancel">取消</j-button>
                <j-button type="primary" @click="confirm">继续操作</j-button>
            </j-space>
        </template>
    </j-modal>
</template>

<style scoped>
.modalContent{
    padding: 16px 16px 16px 16px;
}
.forceDeleteContent{
    width: 515px;
    height: 170px !important;
}
.textInfoClass{
    background-color: #fffde7;
    border: wheat;
    margin-bottom: 20px;
}
</style>
